<template>
  <div class="step-all" ref="stepAll">
    <!-- 第一步和第二步合并了 -->
    <div v-show="activitName === 1"><First @stepChange="stepChange" /></div>
    <!-- 第三步 -->
    <div v-show="activitName === 2"><Third @stepChange="stepChange" /></div>

    <div v-show="activitName === 3 && type === 'normal'">
      <Four @stepChange="stepChange"  />
    </div>
    <div v-show="activitName === 3 && type === 'group'">
      <FourGroup @stepChange="stepChange" />
    </div>
    <div v-show="activitName === 4">
      <Five />
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, nextTick, watch } from "vue";
import First from "./components/First/index.vue";
import Third from "./components/Third/index.vue";
import Four from "./components/Four/index.vue";
import FourGroup from "./components/FourGroup/index.vue";
import Five from "./components/Five/index.vue";
const { step } = withDefaults(
  defineProps<{
    step?: number;
  }>(),
  {
    step: 1,
  }
);




const type = ref<"group" | "normal">("normal"); //是否团单表格

const emits = defineEmits<{
  (event: "stepChange", step: number): void;
}>();

const activitName = ref<number>(step); //当前第几步 0-1步已合并 从0开始算

const stepChange = (step: number, fourChange?: "group" | "normal") => {
  activitName.value = step;
  if (fourChange) type.value = fourChange;
  emits("stepChange", step);
};


// const data = ref();
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
